<template>
  <div>
    <h3>{{ $t("dutyplan.title") }}</h3>
    <div class="search">
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus-outline"
        style="width: 300px"
        @click="addDutyPlan()"
        >{{ $t("dutyplan.created") }}</el-button
      >
    </div>
    <el-table max-height="700" :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        :label="$t('dutyplan.table.index')"
        width="61"
      ></el-table-column>
      <el-table-column
        prop="name"
        :label="$t('dutyplan.table.watch')"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="start_time"
        :label="$t('dutyplan.table.start')"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="end_time"
        :label="$t('dutyplan.table.end')"
      ></el-table-column>
      <el-table-column :label="$t('dutyplan.table.operation')">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="openEditor(scope.row)">打开编辑</el-button> -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            plain
            @click="openEditor(scope.row)"
            >{{ $t("dutyplan.btn.editor") }}</el-button
          >
          <el-popconfirm
            :title="$t('dutyplan.btn.del_sure')"
            @confirm="del(scope.row)"
            style="margin: 0 0 0 10px"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              plain
              >{{ $t("dutyplan.btn.delete") }}</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加值班计划 -->
    <AddPlanDialog
      :dutyPlanDialogVisible="AddPlanShow"
      @closeDialog="addDutyPlan"
      :userData="watchList"
    />
    <!-- 修改值班计划 -->
    <DutyPlanDialog
      :dutyPlanDialogVisible="dutyPlanDialogVisible"
      @closeDialog="closeDialogDuty"
      :form="dutyPlanRow"
      :userData="watchList"
    ></DutyPlanDialog>
  </div>
</template>

<script>
import DutyPlanDialog from "../../../components/DutyPlanDialog.vue";
import AddPlanDialog from "../../../components/addPlanDialog.vue";
export default {
  components: { DutyPlanDialog, AddPlanDialog },
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        query_text: "",
      },
      // 控制编辑弹框的显示与隐藏
      dutyPlanDialogVisible: false,
      AddPlanShow: false,
      // 列表的每行数据 用于传递给弹框组件
      dutyPlanRow: {},
      tableData: [],
      // 没有添加值班计划人员
      NoData: [],
      // 没有添加值班计划人员和自己
      modifySelectionData: [],
      watchList: [],
    };
  },
  created() {
    this.GetList();
    this.getDutyList();
  },
  methods: {
    getDutyList() {
      this.$http.get("/business/employee/list").then((res) => {
        console.log(res.data.date);
        this.watchList = res.data.date;
      });
    },
    // 获取列表数据
    GetList() {
      this.$http
        .get("/business/duty/list", { params: this.queryInfo })
        .then((res) => {
          console.log(res.data);
          var data = [];
          res.data.duty_data.forEach((item) => {
            const NewData = res.data.staff_data.filter((userItem) => {
              return userItem.id == item.name_id;
            });
            console.log(NewData);
            const NewDataBNo = res.data.staff_data.filter((userItem) => {
              return userItem.id != item.name_id;
            });
            if (NewDataBNo.length >= 1) {
              this.NoData = NewDataBNo;
            }
            if (NewData.length != 0) {
              item.name = NewData[0].name;
            }
            data.push(item);
          });
          this.tableData = data;
          console.log(this.tableData);
        });
    },
    // 修改按钮
    openEditor(data) {
      this.dutyPlanRow = data;
      this.modifySelectionData = this.NoData;
      this.modifySelectionData.push({
        id: data.id,
        name: data.name,
      });
      this.dutyPlanDialogVisible = true;
    },
    // 添加
    addDutyPlan(data) {
      this.AddPlanShow = this.AddPlanShow ? false : true;
      if (data) return this.GetList();
    },
    closeDialogDuty() {
      this.dutyPlanDialogVisible = false;
      this.GetList();
    },
    // 删除
    del(data) {
      console.log(data.id);
      this.$http
        .get("/business/duty/del", { params: { id: data.id } })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(this.$t("author.btn.del_success_msg"));
            this.GetList();
          } else {
            this.$message.error(this.$t("author.btn.del_error_msg"));
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>